<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title>图书管理-添加图书</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style type="text/css">
        .table tbody tr td {
            vertical-align: middle;
        }

        table {
            margin-top: 5%;
        }
        span{color:red;}

    </style>
</head>
<body>
<div class="container" id="app">
    <form action="book?opr=save" method="post" id="myform" onsubmit="return bookform();">
        <table class="table table-bordered">
            <tr>
                <td class="text-right">
                    图书名称：
                </td>
                <td class="text-center">
                    <input type="text" class="form-control" v-model="book.bookName" name="bookName" id="bookName" placeholder="请输入图书名称">
                </td>
                <td>
                    <span id="bookNametxt"></span>
                </td>
            </tr>
            <tr>
                <td class="text-right">
                    单  价：
                </td>
                <td class="text-center">
                    <input type="text" class="form-control" v-model="book.price" name="price" id="price" placeholder="请输入单价">
                </td>
                <td>
                    <span id="pricetxt"></span>
                </td>
            </tr>
            <tr>
                <td class="text-right">
                    作  者：
                </td>
                <td class="text-center">
                    <input type="text" class="form-control" v-model="book.author" name="author" id="author" placeholder="请输入作者">
                </td>
                <td>
                    <span id="authortxt"></span>
                </td>
            </tr>
            <tr>
                <td class="text-right">
                    头  像：
                </td>
                <td class="text-center">
                    <input type="file" @change="btnUpload()" name="bookimg" id="bookimg" class="pull-left">
                    <img :src="book.bookimg"  class="img-responsive pull-left " width="100" height="100">
                </td>
                <td>
                    <span id="bookimgtxt"></span>
                </td>
            </tr>
            <tr>
                <td colspan="3" class="text-center">
                    <button type="button" @click="addBook()" class="btn btn-success">保存</button>
                </td>
            </tr>
        </table>
    </form>
</div>

<script>
    let vueApp = new Vue({
        el: "#app",
        data() {
            return {
                user : {

                }
            }
        },
        methods: {
            btnUpload(){
                //获得要上传的文件对象
                let file=document.getElementById("bookimg").files[0];

                //转为FormData
                let formData=new FormData();
                formData.append("file",file);

                axios.post('/upload',formData,{contentType:"multipart/form-data",
                    headers :{
                        "token" : window.localStorage.getItem("token")
                    }
                }).then(result=>{
                        console.log(result.data.msg);
                        if(result.data.status==200){
                            this.book.bookimg=result.data.msg;
                        }else{
                            alert(result.data.msg);
                        }
                    }).catch(e=>{
                    alert("该功能暂停。。。");
                })
            },
            addBook(){
                axios.post("/user/add",this.book,{
                    headers :{
                        "token" : window.localStorage.getItem("token")
                    }
                }).then(result=>{
                        if(result.data.status==200){
                            alert("新增成功")
                            location.href="index.html"
                        }else{
                            alert(result.data.msg);
                        }
                    }).catch(e=>{
                    alert("该功能暂停。。。");
                })
            }

        }, created() {

        }
    });
</script>
</body>
</html>